<template>
  <view class="main-view">

    <eui-section title="对话框示例" type="line" class="hideOnPc">
      <view class="example-body box">
        <eui-button title="成功" class="button popup-success" @buttonClick="dialogToggle('success')"/>
        <eui-button title="失败" class="button popup-error" @buttonClick="dialogToggle('error')"/>
        <eui-button title="警告" class="button popup-warn" @buttonClick="dialogToggle('warn')"/>
        <eui-button title="信息" class="button popup-info" @buttonClick="dialogToggle('info')"/>
      </view>
    </eui-section>

    <eui-section title="输入框示例1" type="line" padding>
      <view class="dialog-box">
        <text class="dialog-text">输入内容：{{ inputValue1 }}</text>
      </view>
      <eui-button title="输入对话框" class="button" type="primary" @buttonClick="inputDialogToggle" />
    </eui-section>

    <eui-section title="输入框示例2" type="line" padding>
      <eui-button title="输入对话框" class="button" type="primary" @buttonClick="inputDialogToggle2" />
    </eui-section>

    <view>
      <!-- 普通弹窗 -->
      <eui-popup ref="popup" background-color="#fff" @change="change" :type="type">
        <view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"><text
            class="text">popup 内容</text></view>
      </eui-popup>
    </view>

    <view>
      <!-- 提示信息弹窗 -->
      <eui-popup ref="message" type="message">
        <eui-popup-message :type="msgType" :message="messageText" :duration="2000"></eui-popup-message>
      </eui-popup>
    </view>

    <view>
      <!-- 提示窗示例 -->
      <eui-popup ref="alertDialog" type="dialog">
        <eui-popup-dialog :type="msgType" cancelText="关闭" confirmText="同意" title="通知" content="欢迎使用 eui-popup!" @confirm="dialogConfirm"
                          @close="dialogClose"></eui-popup-dialog>
      </eui-popup>
    </view>

    <view>
      <!-- 输入框示例1 -->
      <eui-popup ref="inputDialog" type="dialog">
        <eui-popup-dialog ref="inputClose" :value="inputValue1" titleColor="#000000" mode="input" title="输入内容1"
                          placeholder="请输入内容" @confirm="dialogInputConfirm"></eui-popup-dialog>
      </eui-popup>
    </view>

    <view>
      <!-- 输入框示例2 -->
      <eui-popup ref="inputDialog2" type="dialog">
        <eui-popup-dialog ref="inputClose" :value="inputValue2" titleColor="#000000" mode="input" title="输入内容2"
                          placeholder="请输入内容" @confirm="dialogInputConfirm2" :isCustom="true">
          <eui-card-input v-model="formData.c_id1" title="输入内容1" placeholder="请输入" type="text"
                          id="c_id1" />
          <eui-card-input v-model="formData.c_id2" title="输入内容2" placeholder="请输入" type="text"
                          :required="true" id="c_id2" />
        </eui-popup-dialog>
      </eui-popup>
    </view>

  </view>
</template>


<script>
export default {
  data() {
    return {
      type: 'center',
      msgType: 'success',
      messageText: '这是一条成功提示',
      value: '',
      inputValue1: '对话框预置提示内容!',
      inputValue2: '对话框预置提示内容!',
      formData: {
        c_id1: '',
        c_id2: '',
      },
    }
  },
  onReady() {},
  methods: {
    change(e) {
      console.log('当前模式：' + e.type + ',状态：' + e.show);
    },
    toggle(type) {
      this.type = type
      // open 方法传入参数 等同在 eui-popup 组件上绑定 type属性
      this.$refs.popup.open(type)
    },
    messageToggle(type) {
      this.msgType = type
      this.messageText = `这是一条${type}消息提示`
      this.$refs.message.open()
    },
    dialogToggle(type) {
      this.msgType = type
      this.$refs.alertDialog.open()
    },
    dialogConfirm() {
      console.log('点击确认')
      this.messageText = `点击确认了 ${this.msgType} 窗口`
      this.$refs.message.open()
    },
    inputDialogToggle() {
      this.$refs.inputDialog.open()
    },
    inputDialogToggle2() {
      this.$refs.inputDialog2.open()
    },
    dialogClose() {
      console.log('点击关闭')
    },
    dialogInputConfirm(val) {
      console.log('=====val: ', val);
      this.inputValue1 = val
      // 关闭窗口后，恢复默认内容
      this.$refs.inputDialog.close()
    },
    dialogInputConfirm2(val) {
      console.log('=====val: ', val);
      this.inputValue2 = val
      // 关闭窗口后，恢复默认内容
      this.$refs.inputDialog.close()
    },
    shareToggle() {
      this.$refs.share.open()
    }
  }
}
</script>


<style scoped>
.main-view {
  width: 100%;
  height: 100vh;
  background: #FFFFFF;
}
@mixin flex {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
}

@mixin height {
  /* #ifndef APP-NVUE */
  height: 100%;
  /* #endif */
  /* #ifdef APP-NVUE */
  flex: 1;
  /* #endif */
}

.box {
  @include flex;
}

.button {
  @include flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 35px;
  margin: 0 5px;
  border-radius: 5px;
}

.example-body {
  background-color: #fff;
  padding: 10px 0;
}

.button-text {
  color: #fff;
  font-size: 12px;
}

.popup-content {
  @include flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  height: 50px;
  background-color: #fff;
}

.popup-height {
  @include height;
  width: 200px;
}

.text {
  font-size: 12px;
  color: #333;
}

.popup-success {
  color: #fff;
  background-color: #e1f3d8;
}

.popup-warn {
  color: #fff;
  background-color: #faecd8;
}

.popup-error {
  color: #fff;
  background-color: #fde2e2;
}

.popup-info {
  color: #fff;
  background-color: #f2f6fc;
}

.success-text {
  color: #09bb07;
}

.warn-text {
  color: #e6a23c;
}

.error-text {
  color: #f56c6c;
}

.info-text {
  color: #909399;
}

.dialog,
.share {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
}

.dialog-box {
  padding: 10px;
}

.dialog .button,
.share .button {
  /* #ifndef APP-NVUE */
  width: 100%;
  /* #endif */
  margin: 0;
  margin-top: 10px;
  padding: 3px 0;
  flex: 1;
}

.dialog-text {
  font-size: 14px;
  color: #333;
}
</style>
